<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { $LoginId, $UpdateUser } from '@/api/user';

// 用户数据
var user = ref({
    id: 0,
    name: "",
    userpassword: "",
    phone: "",
    email: "",
    sex: "",
    address: "",
    doctorID: "",
    time: ""
})

// 挂载前调用
onBeforeMount(() => {
    let ret = $LoginId({
        id: sessionStorage.getItem('id')
    })
    ret.then((res) => {
        user.value = res.data

    })
})
</script>

<template>
    <div class="personal-nav">
        <div class="personal-avatar">
            <div class="avatar-1">
                <div class="avatar-2">
                    <img class="avatar-img" src="@/images/drug/drug.jpg" alt="" />
                </div>
            </div>
            <div class="personal-name">{{ user.name }}</div>
        </div>
        <div class="personal-list">
            <li @click="$router.push('/personalCenter')">
                <el-icon>
                    <IEpUserFilled />
                </el-icon>
                个人信息
            </li>
            <li @click="$router.push('/medicalRecord')">
                <el-icon>
                    <IEpMemo />
                </el-icon>
                电子病历
            </li>
            <li @click="$router.push('/appointmentStatus')">
                <el-icon>
                    <IEpSwitchFilled />
                </el-icon>
                预约状态
            </li>
            <li @click="$router.push('/changePassword')">
                <el-icon>
                    <IEpKey />
                </el-icon>
                修改密码
            </li>
        </div>
    </div>
</template>

<style scoped lang="scss">
.personal-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 110vh;
    margin-right: 1.5vw;
    border-radius: 0.5vw;
    background-color: #45c998;

    .personal-avatar {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 10vw;
        height: 32vh;
        margin: 4vh auto;

        .avatar-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10vw;
            height: 10vw;
            border-radius: 50%;
            border: 0.2vw solid #52ddaa;

            .avatar-2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 8vw;
                height: 8vw;
                border-radius: 50%;
                border: 0.2vw solid #52ddaa;

                .avatar-img {
                    width: 6vw;
                    height: 6vw;
                    border-radius: 50%;
                }
            }
        }

        .personal-name {
            color: #fff;
            margin: 1vw 0;
            font-size: 1.3vw;
        }
    }

    .personal-list {
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 9.5vh;
            color: #fff;
            font-size: 1.3vw;
            background-color: #3fbb8d;
            border-bottom: 0.1vw solid #298b67;
            cursor: pointer;

            .el-icon {
                margin-right: 1vw;
            }
        }

        li:hover {
            background-color: #33a77c;
        }
    }
}
</style>